<template>
    <div class="search">
        <navBar>
            <van-search v-model="value" placeholder="请输入搜索关键词" @clear="onClear" />
            <template #my>
                <span v-show="!value">取消</span>
                <span v-show="value" @click="searchFn">搜索</span>
            </template>
        </navBar>
        <div class="con">
            <div class="search-jie" v-show="searchFlag">
                <h2>搜索结果</h2>
                <itemty v-for="v in List" :v="v"></itemty>
                <h1 v-if="List.length==0">没有更多数据了</h1>
            </div>
            <div class="search-li" v-show=" !searchFlag">
                <h2>搜索历史 <span @click="mei">删除所有</span></h2>
                <div class="search-list">
                    <div class="search-item" v-for="(ele,ind) in searchList" :key="ind" @click="sear(ele)"
                        @touchstart="gtouchstart()" @touchmove="gtouchmove()" @touchend="showDeleteButton()">
                        {{ele}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getCourseBasis } from "@/http/course"
import itemty from "@/components/conten/itemty.vue"
let searchList1 = localStorage.getItem('searchList1') ? JSON.parse(localStorage.getItem('searchList1')) : []
export default {
    components: {
        itemty
    },
    data() {
        return {
            value: '',
            List: [],
            searchList: searchList1.slice(0, 5),
            searchFlag: false
        }
    },
    watch: {
        value(n) {
            // console.log(n);
            let filterList = searchList1.filter((v) => { return v.includes(n) })
            this.searchList = filterList.slice(0, 5)
            if (!n) {
                this.searchFlag = false
            }
        }
    },
    methods: {
        mei(){
              this.searchList=[]
            localStorage.removeItem("searchList1")
        },
        //长按事件（起始）
        gtouchstart() {
            var self = this;
            this.timeOutEvent = setTimeout(function () {
                self.longPress();
            }, 500); //这里设置定时器，定义长按500毫秒触发长按事件
            return false;
        },
        //手释放，如果在500毫秒内就释放，则取消长按事件，此时可以执行onclick应该执行的事件
        showDeleteButton() {
            clearTimeout(this.timeOutEvent); //清除定时器
            if (this.timeOutEvent != 0) {
                //这里写要执行的内容（如onclick事件）
                console.log("点击但未长按");
            }
            return false;
        },
        //如果手指有移动，则取消所有事件，此时说明用户只是要移动而不是长按
        gtouchmove() {
            clearTimeout(this.timeOutEvent); //清除定时器
            this.timeOutEvent = 0;
        },
        //真正长按后应该执行的内容
        longPress() {
            this.timeOutEvent = 0;
            //执行长按要执行的内容，如弹出菜单
            // console.log("长按");
            this.searchList.splice(0,1)
        },
        sear(ele) {
            this.value = ele
            this.searchFn()
        },
        onClear() {
            console.log("清空了");
        },
        async searchFn() {
            this.searchFlag = true
            let index = searchList1.findIndex((v) => v == this.value)
            if (index != -1) {
                searchList1.splice(index, 1)
            }
            searchList1.unshift(this.value)
            localStorage.setItem('searchList1', JSON.stringify(searchList1))
            let res = await getCourseBasis({
                keywords: this.value,
                course_type: 0,
                page: 1,
                limit: 10
            })
            console.log(res);
            this.List = res.data.list


        }
    }
}
</script>

<style lang="scss">
.search {
    overflow: hidden;
}

.van-search {
    width: 80vw;
    height: 8vh;
}

.con {
    margin-top: 70px;
    height: 92vh;
}

.search-list {
    display: flex;
}

.search-item {
    margin: 10px;
    padding: 10px;
    width: 50px;
    height: 50px;
    background-color: orange;
    color: #fff;
    font-size: 16px;
    text-align: center;
    line-height: 50px;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none;
}
</style>
